<template>
  <template v-for="menu in menuList">
    <el-sub-menu v-if="menu.children && menu.children.length > 0 && menu.meta.level === 1" :index="menu.path + ''" :key="menu.path + ''">
      <template #title>
        <i :class="menu.meta.icon" class="menu-icon"></i>
        <span style="font-size: 16px; font-weight: bold">{{ menu.meta.title }}</span>
      </template>
      <menu-item :menuList="menu.children"></menu-item>
    </el-sub-menu>
    <el-menu-item :index="menu.path + ''" :key="menu.path + ''" v-if="menu.meta.level === 2 && menu.meta.isShow !== false">
      <span>
        <i :class="menu.meta.icon" class="menu-item-icon"></i>
        {{ menu.meta.title }}
      </span>
    </el-menu-item>
  </template>
</template>

<script>
export default {
  name: 'MenuItem',
};
</script>

<script setup>
import { defineProps, onMounted } from 'vue';

const props = defineProps({
  menuList: {
    type: Array,
    default: () => {
      return [];
    }
  }
});


</script>
